<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2-柱状图&折线图</title>
		<script src="../js/echarts/echarts.min.js"></script>
		<script src="../js/jquery-1.11.3.min.js"></script>
	</head>
	<body>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main2" style="width: 1600px;height:600px;"></div>
		<script type="text/javascript">
			$(function() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main2'));
				// 指定图表的配置项和数据
				var colors = ['#5793f3', '#d14a61', '#675bba', '#bc40db','#bc3000'];
				$.ajax({
					url: "http://localhost:8080/api/called110Analysis/chart?time=2019-06-06&city=610800",
					// url: "http://localhost:8080/api/called110Analysis/chart?time=2019-06-06&city=610800&type=030000",
					type: "get",
					dataType : "json",//返回的数据类型
					async : false,//表示请求是否异步处理
					success: function(data) {
						console.log(data)
						option = {
							color: colors,
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'cross'
								}
							},
							grid: {
								right: '30%'
							},
							toolbox: {
								feature: {
									dataView: {
										show: true,
										readOnly: false
									},
									restore: {
										show: true
									},
									saveAsImage: {
										show: true
									}
								}
							},
							legend: {
								// 固定
								data: ['当日数量', '上月同期', '上年同期', '本周接警数量', "上周同期环比"]
							},
							xAxis: [{
								type: 'category',
								axisTick: {
									alignWithLabel: true
								},
								axisLabel: {
									interval: 0
								},
								// 后台返回
								data: data['data'].xAxis.data
							}],
							yAxis: [
								{
									type: 'value',
									name: '数量',
									min: 0,
									max: data['data'].yAxis.max, //后台返回
									position: 'left',
									axisLine: {
										lineStyle: {
											color: colors[0]
										}
									},
									axisLabel: {
										formatter: '{value} 个'
									}
								},
								{
									type: 'value',
									name: '百分比',
									min: -100,
									max: 100,
									position: 'right',
									offset: 80,
									axisLine: {
										lineStyle: {
											color: colors[1]
										}
									},
									axisLabel: {
										formatter: '{value} %'
									}
								}
							],
							series: [
								{
									name: data['data'].series[0].name,
									yAxisIndex: 0,
									type: 'bar',
									data: data['data'].series[0].data
								},
								{
									name: data['data'].series[1].name,
									yAxisIndex: 0,
									type: 'bar',
									data: data['data'].series[1].data
								},
								{
									name: data['data'].series[2].name,
									yAxisIndex: 0,
									type: 'bar',
									data: data['data'].series[2].data
								},{
									name: data['data'].series[3].name,
									yAxisIndex: 0,
									type: 'bar',
									data: data['data'].series[3].data
								},{
									name: data['data'].series[4].name,
									yAxisIndex: 1,
									type: 'line',
									data: data['data'].series[4].data
								}
							]
						};
						console.log(option.series)		
						console.log(option.xAxis[0].data)	
						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
					}
				})
			})
		</script>
	</body>
</html>
